<template>
    <u-popup
            :show="show"
            @close="closeHandler"
    >
        <view class="u-picker">
            <u-toolbar
                    v-if="showToolbar"
                    :cancelColor="cancelColor"
                    :confirmColor="confirmColor"
                    :cancelText="cancelText"
                    :confirmText="confirmText"
                    :title="title"
                    @cancel="cancel"
                    @confirm="confirm"
            ></u-toolbar>

            <view class="content">
                <u--textarea v-if="content==='textarea'" v-model="num" placeholder="请输入内容" ></u--textarea>

                <view style="display: flex;flex-direction: row; flex-wrap: wrap;" v-else-if="content==='tag'">
                    <view class="u-page__tag-item" v-for="(item, index) in tags" :key="index">
                        <u-tag :text="item.text" :plain="!item.checked" type="primary" :name="index" @click="roomClick"></u-tag>
                    </view>
                </view>

                <u-input v-model="num" v-else>
                    <u--text :text="unit" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
                </u-input>
                <view class="safe-area-inset-bottom"></view>
            </view>
        </view>
    </u-popup>
</template>

<script>
    export default {
        name: "td-picker",
        props: {
            // 是否展示picker弹窗
            show: {
                type: Boolean,
                default: uni.$u.props.picker.show
            },
            // 是否展示顶部的操作栏
            showToolbar: {
                type: Boolean,
                default: uni.$u.props.picker.showToolbar
            },
            // 顶部标题
            title: {
                type: String,
                default: uni.$u.props.picker.title
            },
            // 取消按钮的文字
            cancelText: {
                type: String,
                default: uni.$u.props.picker.cancelText
            },
            // 确认按钮的文字
            confirmText: {
                type: String,
                default: uni.$u.props.picker.confirmText
            },
            // 取消按钮的颜色
            cancelColor: {
                type: String,
                default: uni.$u.props.picker.cancelColor
            },
            // 确认按钮的颜色
            confirmColor: {
                type: String,
                default: uni.$u.props.picker.confirmColor
            },
            // 是否允许点击遮罩关闭选择器
            closeOnClickOverlay: {
                type: Boolean,
                default: uni.$u.props.picker.closeOnClickOverlay
            },
            defaultNum:{
                type: String,
                default:''
            },
            defaultArray:{
                type: Array,
                default:[]
            },
            unit:{
                type: String,
                default:''
            },
            content:{
                type: String,
                default:''
            },
            tagList:{
                type: Array,
                default: [],
            }
        },
        mounted(){
            if (this.content ==='tag'){
                this.tags = this.tagList;
            } else{
                this.num = this.defaultNum;
            }
        },
        data(){
            return {
                num:'',
                tags:[],
            };
        },
        methods: {
            // 关闭选择器
            closeHandler() {
                if (this.closeOnClickOverlay) {
                    this.$emit('close')
                }
            },
            // 点击工具栏的取消按钮
            cancel() {
                this.$emit('cancel')
            },
            // 点击工具栏的确定按钮
            confirm() {
                this.$emit('confirm', this.num);
            },

            roomClick(name){
                this.tags[name].checked = !this.tags[name].checked;

                this.num = [];
                for (let i = 0; i < this.tags.length; i++) {
                    if (this.tags[i].checked) {
                        this.num.push(this.tags[i].id)
                    }
                }
            },
        },
    }
</script>

<style scoped>
    .content{
        padding: 20rpx;
    }
    .u-page__tag-item {
        margin-right: 20px;
        margin-top: 20rpx;
    }
</style>